<template>
  <view class="page_content" :class="className" :style="style">
    <slot></slot>
    <view class="null_box" v-if="nullData">
      <image style="width: 336rpx; height: 236rpx" :src="nullImg"></image>
      <text class="null_text">{{ nullText }}</text>
    </view>
    <view class="mask" v-if="loadingMask && isLoading"></view>
    <view class="loading" v-show="isLoading">
      <image class="load_img" src="@/static/images/loading.png"></image>
    </view>
    <view class="network-overtime" v-if="netOver">
      <image class="overtime-img" :src="noNetImg"></image>
      <!-- #ifdef APP-PLUS -->
      <view class="overtime-msg"
        >{{ $t('locales.overtimeMsg') }}
        <text style="color: #0049ab" @click="openSystemSettings">{{
          $t('locales.setUp')
        }}</text></view
      >
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="overtime-msg">{{ $t('locales.lowCurrency') }}</view>
      <!-- #endif -->
      <u-button type="primary" plain @click="retry">{{
        $t('locales.retry')
      }}</u-button>
    </view>

    <u-modal
      v-model="msgInfo.show"
      :title="msgInfo.title"
      :title-style="{ paddingBottom: '47rpx' }"
      :confirm-style="{ color: '#0049AB' }"
    >
      <scroll-view
        scroll-y
        class="slot-content"
      >
        <rich-text :nodes="msgInfo.content"></rich-text>
      </scroll-view>
    </u-modal>
  </view>
</template>

<script>
import nullImg from '@/static/images/null_data.png'
import noNet from './noNetImg'
export default {
  props: {
    // 背景色
    backgroundColor: {
      type: String,
      default: '#f7f4f8'
    },

    // 高度包括的东西 ['navBar', 'tabBar']
    heightInclude: {
      type: Array,
      default: () => []
    },

    bgImg: {
      type: Boolean,
      default: false
    },

    // 缺省图状态
    nullData: {
      type: Boolean,
      default: false
    },

    // 缺省文字
    nullText: {
      type: String,
      default: 'No Data~'
    },

    // 缺省图
    nullImg: {
      type: String,
      default: nullImg // 还有默认图片
    },

    // loading遮罩层
    loadingMask: {
      type: Boolean,
      default: true
    }
  },
  watch: {},
  data() {
    return {
      style: `
				background-color: ${this.backgroundColor};
				background-image: ${this.bgImg ? '' : 'none'}
			`,
      className: this.heightInclude.join('__'),
      noNetImg: noNet
    }
  },
  computed: {
    isLoading() {
      return this.$store.getters.isLoading
    },
    msgInfo() {
      return this.$store.getters.msgInfo
    },
    netOver() {
      return this.$store.getters.netOver
    }
  },
  methods: {
    openSystemSettings() {
      // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
      // https://ask.dcloud.net.cn/docs/
      if (uni.getSystemInfoSync().platform === 'ios') {
        this.gotoiOSSetting()
      } else {
        this.gotoAndroidSetting()
      }
    },
    gotoiOSSetting() {
      var UIApplication = plus.ios.import('UIApplication')
      var application2 = UIApplication.sharedApplication()
      var NSURL2 = plus.ios.import('NSURL')
      var setting2 = NSURL2.URLWithString('App-prefs:root=General')
      application2.openURL(setting2)
      plus.ios.deleteObject(setting2)
      plus.ios.deleteObject(NSURL2)
      plus.ios.deleteObject(application2)
    },
    gotoAndroidSetting() {
      var Intent = plus.android.importClass('android.content.Intent')
      var Settings = plus.android.importClass('android.provider.Settings')
      var mainActivity = plus.android.runtimeMainActivity()
      var intent = new Intent(Settings.ACTION_SETTINGS)
      mainActivity.startActivity(intent)
    },
    retry() {
      this.$emit('retry')
    }
  }
}
</script>

<style lang="scss" scoped>
.page_content {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url('~@/static/images/home_bg.png');
  background-repeat: no-repeat;
  background-size: 100%;

  .null_box {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .null_text {
      color: $u-type-info;
      display: inline-block;
      margin-top: 49rpx;
    }
  }

  .mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }

  .loading {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #000000;
    opacity: 0.4;
    width: 154rpx;
    height: 123rpx;
    z-index: 998;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .load_img {
      width: 72rpx;
      height: 72rpx;
      animation: turn 1s linear infinite;
    }

    @keyframes turn {
      0% {
        -webkit-transform: rotate(0deg);
      }
      25% {
        -webkit-transform: rotate(90deg);
      }
      50% {
        -webkit-transform: rotate(180deg);
      }
      75% {
        -webkit-transform: rotate(270deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
  }

  .network-overtime {
    width: 100%;
    height: 100%;
    background-color: #f7f4f8;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    z-index: 11;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .overtime-img {
      width: 360rpx;
      height: 260rpx;
    }
    .overtime-msg {
      width: 380rpx;
      font-weight: 500;
      color: #999999;
      line-height: 40rpx;
      font-size: 26rpx;
      text-align: center;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }
  }

  // 仅出现在 ** 平台下的代码
  /* #ifdef APP-PLUS || MP-WEIXIN */
  min-height: 100vh;
  /* #endif */

  /* #ifdef H5 */
  min-height: calc(
    100vh - 44px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom)
  );
  /* #endif */
}

/* #ifdef H5 */
.tabBar {
  min-height: calc(100vh - 50px - env(safe-area-inset-top));
}
.navBar {
  min-height: calc(100vh - 44px - env(safe-area-inset-bottom));
}
.navBar__tabBar {
  min-height: 100vh;
}

.tabBar__navBar {
  min-height: 100vh;
}
/* #endif */

.slot-content {
  padding: 0 60rpx 20rpx 60rpx;
  box-sizing: border-box;
  height: 30vh;
  overflow-y: scroll;
}
</style>
